import {RouteComponentProps} from 'react-router-dom';
import {loader} from '../utils/loader';

export interface RouteConfig {
  path: string;
  component?:
    | React.ComponentType<RouteComponentProps<any>>
    | React.ComponentType<any>;
  hidden?: boolean;
  meta?: {
    [key: string]: any;
    title: string;
    icon?: string;
  };
  children?: RouteConfig[];
}

/**
 * 尽量不要直接导入这个对象去使用，应该调用getRouteTree方法返回一个副本
 */
export const constantRouter: RouteConfig[] = [
  {
    path: '/dashboard',
    component: loader(() => import('../views/dashboard/Dashboard')),
    meta: {title: '控制台', icon: 'dashboard'}
  },
  {
    path: '/posts',
    component: loader(() => import('../views/posts/Posts')),
    meta: {title: '文章', icon: 'dashboard'}
  },
  {
    path: '/content-list',
    component: loader(() => import('../views/content-list/ContentList')),
    meta: {title: '评论区', icon: 'dashboard'}
  },
  {
    path: '/canvas-opt',
    component: loader(() => import('../views/canvas/Canvas')),
    meta: {title: 'Canvas练习区', icon: 'dashboard'}
  },
  {
    path: '/echarts',
    component: loader(() => import('../views/echarts/Echarts')),
    meta: {title: 'Echarts练习区', icon: 'dashboard'}
  },
  {
    path: '/study-css',
    component: loader(() => import('../views/styled-css/StyledCss')),
    meta: {title: '开发练习区', icon: 'dashboard'}
  },
  {
    path: '/study-component',
    component: loader(() => import('../views/customization-component/Customization')),
    meta: {title: '组件练习区', icon: 'dashboard'}
  },
];

/**
 *  返回一个静态路由的副本,会去掉component属性
 */
export const getRouteTree = (): RouteConfig[] =>
  JSON.parse(JSON.stringify(constantRouter));
